<!--
 * @Descripttion: xgplayer二次封装
 * @version: 1.1
 * @Author: sakuya
 * @Date: 2021年11月29日12:10:06
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月30日21:02:50
-->

<template>
	<div class="jxx-video-box">
		  <easy-player ref="videoplay" :video-url="src"></easy-player>
	</div>
</template>

<script>
	import EasyPlayer from '@easydarwin/easyplayer'

	export default {
		components: {
		   EasyPlayer
		},
		props: {
			src: {
				type: String,
				required: true,
				default: ""
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			controls: {
				type: Boolean,
				default: false
			},
			loop: {
				type: Boolean,
				default: false
			},
			isLive: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				player: null
			}
		},
		
		mounted() {
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.sc-video {
		padding-top: 53.44% !important;
	}

	.sc-video:deep(.danmu)>* {
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
	}

	.sc-video:deep(.xgplayer-controls) {
		background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
	}

	.sc-video:deep(.xgplayer-progress-tip) {
		border: 0;
		color: #fff;
		background: rgba(0, 0, 0, .5);
		line-height: 25px;
		padding: 0 10px;
		border-radius: 25px;
	}

	.sc-video:deep(.xgplayer-enter-spinner) {
		width: 50px;
		height: 50px;
	}
</style>
